import React, {useState} from 'react';
import {NavLink, useNavigate} from "react-router-dom";
import { Input, Select, Space} from "antd";
import LoginAvatar from "./LoginAvatar";

function NavHeader(props) {
    const options = [
        {
            value: 'issue',
            label: '问答',
        },
        {
            value: 'book',
            label: '书籍',
        },
    ];
    let loading = false
    const navigate = useNavigate()
    const onSearch = (value) => {
        if (value) {
            navigate('/searchPage', {
                state: {
                    value,
                    searchOption
                }
            })
        }
    }
    const [searchOption, setSearchOption] = useState('issue')
    const onChange = (value) => {
        setSearchOption(value)

    }
    return (
        <div className="headerContainer">
            {/*头部logo*/}
            <div className="logo"></div>
            {/*头部导航*/}
            <nav className="navContainer">
                <NavLink to="/" className="navigation">问答</NavLink>
                <NavLink to="/books" className="navigation">书籍</NavLink>
                <NavLink to="/interviews" className="navigation">面试题</NavLink>
            </nav>
            {/*搜索框*/}
            <Space direction="vertical">
                <Space.Compact style={{marginLeft: '100px'}}>
                    <Select defaultValue="issue" options={options} onChange={onChange}/>
                    <Input.Search onSearch={onSearch} placeholder="请输入要搜索的内容" loading={loading} enterButton="搜索" allowClear/>
                </Space.Compact>
            </Space>
            {/*登录按钮*/}
            <div className="loginContainer">
                <LoginAvatar handleLogin={props.handleLogin}/>
            </div>
        </div>
    );
}

export default NavHeader;